const zb2 = [[120.4320029999999, 29.388288210813755]];
let positionsPoints = null;
let circleContext = null;
let canvasOverlay = null;
// 创建等高等宽画布
function getCanvas (mapboxCanvas) {
  const canvasOverlay = document.createElement('canvas');
  canvasOverlay.style.position = 'absolute';
  canvasOverlay.className = 'overlay-canvas';
  canvasOverlay.width = parseInt(mapboxCanvas.style.width);
  canvasOverlay.height = parseInt(mapboxCanvas.style.height);
  return canvasOverlay;
}

let reqAniID = null;
let radius = 10;
// const zb = [];
// for (let i = 0; i < 100; i++) {
//   zb.push([zb2[0] + i * 0.01, zb2[1] + i * 0.01]);
// }

// 绘图
function startAnimation (positionsPoints, context) {
  function drawCircle () {
    positionsPoints.map(p => {
      context.beginPath();
      context.arc(parseInt(p.x), parseInt(p.y), radius, 0, Math.PI * 2);
      context.stroke();
    });

    const prev = context.globalCompositeOperation; // 只显示canvas上原图像的重叠部分<br>
    context.globalCompositeOperation = 'destination-in';// 设置主canvas的绘制透明度，圆圈中间的浅黄色部分<br>
    context.globalAlpha = 0.95; // 这一步目的是将canvas上的图像变的透明<br>
    context.fillRect(0, 0, 1920, 900); // 在原图像上重叠新图像<br>
    context.globalCompositeOperation = prev; // 下面代用的drawcricle方法，圆圈覆盖在正方形上
    context.closePath();
    context.lineWidth = 2;
    context.strokeStyle = 'rgba(250,0,0,1)';
    context.stroke();
    radius += 0.3;// 每帧半径增加0.
    if (radius > 15) {
      radius = 5;
    }

    reqAniID = requestAnimationFrame(drawCircle);
  }
  drawCircle();
}

let line1Ani = null;
function startLine1Ani (map) {
  let stap = 0;

  function drawLine1 () {
    const ov = map.getPaintProperty('focuseBorderLayer', 'line-opacity');
    if (ov >= 1) {
      stap = -0.07;
    }
    if (ov <= 0) {
      stap = 0.07;
    }
    let nv = ov + stap;
    nv = nv > 1 ? 1 : nv;
    nv = nv < 0 ? 0 : nv;
    map.setPaintProperty('focuseBorderLayer', 'line-opacity', nv);
    line1Ani = requestAnimationFrame(drawLine1);
  }
  drawLine1();
}

export default {
  methods: {
    addCanvas () {
      const { map } = this;
      const mapboxCanvas = map._canvas;
      canvasOverlay = getCanvas(mapboxCanvas);
      // 添加画布
      map._canvasContainer.appendChild(canvasOverlay);
      // 
      circleContext = canvasOverlay.getContext('2d');

      map.on('moveend', () => {
        canvasOverlay.height = parseInt(mapboxCanvas.style.height);
      });
      map.on('move', () => {
        canvasOverlay.height = parseInt(mapboxCanvas.style.height);
      });
    },
    toggleCanvasDraw () {
      const { map } = this;
      // const mapboxCanvas = map._canvas;
      if (reqAniID) {
        const mapboxCanvas = map._canvas;
        canvasOverlay.height = parseInt(mapboxCanvas.style.height);
        cancelAnimationFrame(reqAniID);
        reqAniID = null;
      } else {
        positionsPoints = zb2.map(v => map.project([v[0], v[1]]));

        startAnimation(positionsPoints, circleContext);
      }
    },
    toggleTianditu () {
      const { map } = this;
      const v = map.getLayoutProperty('tianditu', 'visibility');
      map.setLayoutProperty('tianditu', 'visibility', v === 'none' ? 'visible' : 'none');
    },
    line1 () {
      const { map } = this;
      if (line1Ani) {
        cancelAnimationFrame(line1Ani);
        line1Ani = null;
      } else {
        map.setPaintProperty('focuseBorderLayer', 'line-color', '#78caff');
        map.setPaintProperty('focuseBorderLayer', 'line-opacity', 0);
        startLine1Ani(map);
      }
    }

  }
};